<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../static/css/index.css" th:href="@{/css/index.css}">
    <link rel="stylesheet" href="../static/css/type.css" th:href="@{/css/type.css}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
    <!-- 引入 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
    <title>博客详情</title>
</head>
<body>
    <!-- 导航 -->
<div class="animated bounceInDown">
<nav class="ui inverted segment m-padded-td" th:replace="_fragments :: menu(1)">
    <div class="ui container">
      <div class="ui inverted secondary menu">
            <h2 class="ui teal header item" style="font-size: 25px !important;">个人博客</h2>
          <a href="#" class="active m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
          <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
          <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
          <a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
            <div class="right item">
                <div class="ui icon inverted transparent input">
                    <input type="text" placeholder="Search small...">
                    <i class="search link icon"></i>
                  </div>
            </div>
        </div>
    </div>
    </nav>
</div>
<!-- 中间 -->
    <div  class="m-padded-tb-big m-container-small m-min-height">
        <div class="ui container">
            <!-- 详情头部 -->
            <div class="ui top attached segment">
                <div class="ui horizontal link list">
                    <div class="item">
                        <img src="../static/images/codemusik_wps图片.png" th:src="@{${blog.user.avatar}}" alt="" class="ui avatar image">
                        <div class="content"><a  class="header" th:text="${blog.user.nickname}">kevintam</a></div>
                    </div>
                    <div class="item">
                        <i class="calendar icon"></i> <span th:text="${blog.updateTimeStr}">2020-01-01</span>
                    </div>
                    <div class="item">
                        <i class="eye icon"></i> <span th:text="${blog.views}">186</span>
                    </div>
                </div>
            </div>
            <div class="ui attached segment">
                <img src="https://picsum.photos/id/0/800/450" alt="" class="ui fluid rounded image">
            </div>
            <div class="ui attached segment">
                <div class="ui right aligned basic segment">
                    <div class="ui orange basic label" th:text="${blog.flag}">原创</div>
                </div>
                <h2 class="ui center aligned header" th:text="${blog.title}">Hello world！</h2>
                 <!--中间主要内容部分-->
            <div id="content" class="typo  typo-selection js-toc-content m-padded-lr-responsive m-padded-tb-large" th:utext="${blog.content}" style="font-size: 18px">
                <h2 id="序">序</h2>
                <p>2020年1月1日，<br />
                这将是一个值得纪念的日子，<br />
                我的个人博客，终于出世了~<br />
                <strong>Hello,world!</strong></p>
                <h2 id="昨天">昨天</h2>
                <p>一转眼，大学毕业已经四年多了，说长不长，说短吧，倒是也发生了不少事。</p>
                <p>毕业第一年，刚好也是第一份工作的年限，初入编程世界的我，开始领略程序所带给这个世界的变化，也开始了漫长的学习之旅。<br />
                在第一份工作里，我遇到了编程的启蒙导师，虽已各奔东西，但仍铭记于心，还结识了几个臭味相投的朋友，一位大神，一位语言鬼才，一位山西煤二哥，一位河南大呲花，偶尔聚在一起，吹吹牛x，侃侃大山，也是乐趣多多。<br />
                这一年，我吃到了人生第一次胡大，至今仍记忆犹新，难以忘怀；这一年，我自己买了第一部手机，第一台电脑，都说刚毕业的一年是攒不下钱的，想想也是，毕竟人生第一次主管财政大权，我只能说：月光一时爽，一直月光一直爽~</p>
                <p>相比第一年，毕业的第二年和第三年倒有些显得平淡了。<br />
                一份新工作，几个新朋友；<br />
                一段来也快去也快的感情；<br />
                一个外甥女，一个外甥；<br />
                看了几本书，随了几次份子；<br />
                拿了驾驶本，捡了捡英语；<br />
                因为工作，坐了人生第一次飞机，去了趟乌鲁木齐。</p>
                <p>毕业第四年，也就是去年，一位同年同月同日生的好友离开了北京，一个二次元宅男结了婚，一位学霸出了国。当这一切全都发生的时候，我才意识到，遥远的离别原来近在咫尺。之前那么多次的小聚，到现在看来，还是少的可怜。<br />
                珍惜二字，言之轻易，行之艰巨。</p>
                <p>时光已逝，回忆永存。</p>
                <h2 id="今天">今天</h2>
                <p>现在的我，虽说已经工作了四年，但感觉自己依旧没有什么长进，所以想搭建一个属于自己的博客网站（虽然早有这个想法，但总是犯懒），一方面总结自己的所学，一方面也为以后的学习增加动力。</p>
                <p>如今，开源渐渐成为主流，Github也成为了一座宝库，各式各样的工具、框架、应用等等琳琅满目。然而，我的灵感却来自于B站。<br />
                我都已经忘了，是什么时候开始看B站的。而现在，她们似乎成了我的生活必需品。原以为“它”只是个二次元网站，但后来才慢慢发现，她们包罗万象，无所不知。</p>
                <p>这里有无数的大神：视频剪辑、手工制作、音乐、舞蹈等等，看完这些大神视频，想不到什么溢美之词，最后只能感叹自己的文化水平太低，然后发一条“卧槽”弹幕和三连，以表敬意；这里是许多流行梗的发源地，《鸡你太美》《改革春风吹满地》等等，无需较真，只管大笑；这里有今年的动漫神作《鬼灭之刃》，多说无用，真香~；这里还有韩综、影讯、公开课等等等等。</p>
                <p>当然，最重要的，在她们的编程频道里，我看到了本博客的出处：《SpringBoot开发一个小而美的个人博客》（av72035869）。原本是想用博客框架的，但是看了这个视频之后，觉得博客框架虽然简单，但后续学习成本高。所以，我最后选择在该视频的源码的基础上，修改了一些布局和样式，做成了现在的博客网站。从开发到部署上线，确实花费了不少功夫：买服务器，买域名，域名备案，网站安全等等，真实地体会了一下，一个网站的诞生~</p>
                <p>至于博客的名字：Codemusik，说实话，确实也想了许久。“code”自不必说，毕竟本职工作。至于“musik”，我平时喜欢听音乐，而音乐的单词是“music”，为什么把c换成k？我想，懂的，都懂~</p>
                <h2 id="明天">明天</h2>
                <p>从今天开始，我的个人博客也算是正式面世了。<br />
                未来，我会尽力更新博客内容，分享自己所学、所思、所感，欢迎大家多多浏览加留言，也可以提建议，反馈bug有奖呦~</p>
                <p>差点忘了说，祝大家2020新年快乐！！！~</p>
                <p>友情提示：PC端浏览乐趣更多呦~</p>
                </div>

                 <!--标签-->
            <div class="m-padded-lr-responsive">
                <div class="ui basic blue left pointing label" th:each="tags,tag:${blog.tags}" th:text="${tags.name}">日记</div>
            </div>
            <div class="ui center aligned basic segment">
                <button id="rewardButton" class="ui orange basic circular button">赞赏</button>
            </div>
            </div>
            <div class="ui attached positive message">
                 <!--博客信息-->
            <div class="ui middle aligned grid">
                <div class="eleven wide column">
                    <ui class="list">
                        <li>作者：<span th:text="${blog.user.nickname}">kevintam</span>
                            <!--<a  th:href="@{/about}" >（联系作者）</a>-->
                        </li>
                        <li>发表时间：<span th:text="${blog.updateTimeStr}">2020-01-01 00:00</span></li>
                        <li>版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
                        <li>公众号转载：请在文末添加作者公众号二维码</li>
                    </ui>
                </div>
                <div class="five wide column">
                    <img src="../static/images/weixin.png" alt="" class="ui right floated rounded bordered image" style="width: 110px">
                </div>
            </div>
            </div>
        </div>
            <div class="ui bottom attached segment">
                 <!--留言区域列表-->
                <div id="comment-container"  class="ui teal segment">
                    <div th:fragment="commentList">
                        <div class="ui threaded comments" style="max-width: 100%;">
                            <h3 class="ui dividing header">评论</h3>
                            <div class="comment" th:each="comment : ${comments}">
                                <a class="avatar">
                                    <img src="../static/images/codemusik_wps图片.png" th:src="@{${comment.avatar}}">
                                </a>
                                <div class="content">
                                    <a class="author" >
                                        <span th:text="${comment.nickname}">Matt</span>
                                        <div class="ui mini basic teal left pointing label m-padded-mini" th:if="${comment.avatar} != '/images/codemusik_wps图片.png'">博主</div>
                                    </a>
                                    <div class="metadata">
                                        <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                                    </div>
                                    <div class="text" th:text="${comment.content}">
                                        How artistic!
                                    </div>
                                    <div class="actions">
                                        <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}" onclick="reply(this)">回复</a>
                                    </div>
                                </div>
                                <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">
                                    <div class="comment" th:each="reply : ${comment.replyComments}">
                                        <a class="avatar">
                                            <img src="../static/images/codemusik_wps图片.png" th:src="@{${reply.avatar}}">
                                        </a>
                                        <div class="content">
                                            <a class="author" >
                                                <span th:text="${reply.nickname}">小红</span>
                                                <div class="ui mini basic teal left pointing label m-padded-mini" th:if="${reply.avatar} != '/images/codemusik_wps图片.png'">博主</div>
                                                &nbsp;<span class="m-teal" th:text="|@ ${reply.parentComment.nickname}|">@ 小白</span>
                                            </a>
                                            <div class="metadata">
                                                <span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                                            </div>
                                            <div class="text" th:text="${reply.content}">
                                                How artistic!
                                            </div>
                                            <div class="actions">
                                                <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}" onclick="reply(this)">回复</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--/*-->
                            <div class="comment">
                                <a class="avatar">
                                    <img src="../static/images/codemusik_wps图片.png">
                                </a>
                                <div class="content">
                                    <a class="author">Elliot Fu</a>
                                    <div class="metadata">
                                        <span class="date">Yesterday at 12:30AM</span>
                                    </div>
                                    <div class="text">
                                        <p>This has been very useful for my research. Thanks as well!</p>
                                    </div>
                                    <div class="actions">
                                        <a class="reply">回复</a>
                                    </div>
                                </div>
                                <div class="comments">
                                    <div class="comment">
                                        <a class="avatar">
                                            <img src="../static/images/codemusik_wps图片.png">
                                        </a>
                                        <div class="content">
                                            <a class="author">Jenny Hess</a>
                                            <div class="metadata">
                                                <span class="date">Just now</span>
                                            </div>
                                            <div class="text">
                                                Elliot you are always so right :)
                                            </div>
                                            <div class="actions">
                                                <a class="reply">回复</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="comment">
                                <a class="avatar">
                                    <img src="../static/images/codemusik_wps图片.png">
                                </a>
                                <div class="content">
                                    <a class="author">Joe Henderson</a>
                                    <div class="metadata">
                                        <span class="date">5 days ago</span>
                                    </div>
                                    <div class="text">
                                        Dude, this is awesome. Thanks so much
                                    </div>
                                    <div class="actions">
                                        <a class="reply">回复</a>
                                    </div>
                                </div>
                            </div>
                            <!--*/-->

                        </div>
                    </div>
                </div>
                <div id="comment-form" class="ui form">
                    <input type="hidden" name="blog.id" id="blogId" th:value="${blog.id}">
                    <input type="hidden" name="parentComment.id" id="parentComment.id" value="-1">
                    <div class="field">
                        <textarea name="content" id="content1" placeholder="请输入评论信息..."></textarea>
                    </div>
                    <div class="fields">
                        <div class="field m-mobile-wide m-margin-bottom-small">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" id="nickname" name="nickname"  placeholder="姓名" th:value="${session.user}!=null ? ${session.user.nickname}">
                            </div>
                        </div>
                        <div class="field m-mobile-wide m-margin-bottom-small">
                            <div class="ui left icon input">
                                <i class="mail icon"></i>
                                <input type="text" id="email" name="email" placeholder="邮箱" th:value="${session.user}!=null ? ${session.user.email}">
                            </div>
                        </div>
                        <div class="field  m-margin-bottom-small m-mobile-wide">
                            <button id="commentpost-btn" type="button" class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
                        </div>
                    </div>

                </div>
            </div>
    </div>
    </div>
<!-- 底部 -->
    <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="four wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../static/images/erweima.png" th:src="@{/images/weixin.png}" class="ui rounded image" alt="" style="width: 110px">
                    </div>
                </div>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
                <div class="ui inverted link list">
                    <a  class="item m-text-thin">843808107@qq.com</a>
                    <a  class="item m-text-thin">QQ：843808107</a>
                </div>
            </div>
            <div class="eight wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini" style="font-size: 15px; color:darkgray;">这是我的个人博客，会分享关于编程、写作、思考相关的内容，希望可以给来到这儿的人有所帮助~</p>
            </div>
        </div>
        <div class="ui inverted link horizontal list">
            <a class="item m-text-thin" style="vertical-align: middle" href="http://icp.chinaz.com/info?q=kevintam.cn" target="_blank">
                <span>备案/许可证号：鄂ICP备19030178号</span>
            </a>
            <a class="item m-text-thin" style="vertical-align: middle" href="http://www.beian.miit.gov.cn/" target="_blank">
                <span>鄂ICP备19030178号-1</span>
            </a>
        </div>
</footer>
</canvas>

    <!-- waifu-tips.js 依赖 JQuery 库 -->
    <script src="../static/assets/jquery-1.11.0.min.js" th:src="@{/assets/jquery-1.11.0.min.js}"></script>

    <!-- 实现拖动效果，需引入 JQuery UI -->
    <script src="../static/assets/jqueryUi.js" th:src="@{/assets/jqueryUi.js}"></script>
    <script src="../static/assets/autoload.js" th:src="@{/assets/autoload.js}"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
<script src="./js/ribbon.min.js" th:src="@{/js/ribbon.min.js}"></script>
<script>

    window.onload = function () {
        var pageNumber = 0;
        console.log(pageNumber);
        var aList = $('#pageBtns').children();
        console.log(aList);
        for (var i = 0; i < aList.length; i++) {
            var a = aList[i];
            if(a.text == (pageNumber + 1)){
                $(a).toggleClass('basic');
            }
        }
    };

    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });
    $('.wechat').popup({
        popup : $('.wechat-qr'),
        position: 'bottom center'
    });
    $('.zheng').popup({
        popup : $('.zheng-qr'),
        position: 'bottom center'
    });
    $('.qq').popup();
    $('.github').popup();
    //评论表单验证
    $('.ui.form').form({
        fields: {
            title: {
                identifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '请输入评论内容'
                }
                ]
            },
            content: {
                identifier: 'nickname',
                rules: [{
                    type: 'empty',
                    prompt: '请输入你的大名'
                }]
            },
            type: {
                identifier: 'email',
                rules: [{
                    type: 'email',
                    prompt: '请填写正确的邮箱地址'
                }]
            }
        }
    });
    $('#commentpost-btn').click(function () {
        var boo = $('.ui.form').form('validate form');
        if (boo) {
            console.log('校验成功');
            postData();
        } else {
            console.log('校验失败');
        }
    });
    $(function () {
        $("#comment-container").load("[[@{/comments/{id}(id=${blog.id})}]]");
    });

    //
    function postData() {
        $("#comment-container").load("[[@{/comments}]]",{
            "parentComment.id" : $("[name='parentComment.id']").val(),
            "blogId" : $("[name='blog.id']").val(),
            "nickname": $("[name='nickname']").val(),
            "email"   : $("[name='email']").val(),
            "content" : $("[name='content']").val()
        },function (responseTxt, statusTxt, xhr) {
           $(window).scrollTo($('#comment-container'),500);
            clear();
        });
    }
    function clear() {
        $("[name='content']").val('');
        $("[name='parentCommentId']").val(-1);
        $("[name='content']").attr("placeholder", "请输入评论信息...");
    }
    function reply(obj) {
        var commentId = $(obj).data('commentid');
        var commentNickname = $(obj).data('commentnickname');
        $("[name='content']").attr("placeholder", "@"+commentNickname).focus();
        $("[name='parentComment.id']").val(commentId);
        $(window).scrollTo($('#comment-form'),500);
    }
</script>
</body>
</html>